<template>

  <div>
    <AlNavBar @onClickLeft="back" title="CourseSetting"/>

    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
      <div class="content ">

        <div class="course-list">
          <div v-for="value in 5" class="van-skeleton van-skeleton--animate" v-if="isLoading">
            <div class="van-skeleton__avatar"></div>
            <div class="van-skeleton__content">
              <div class="van-skeleton__row"></div>
              <div class="van-skeleton__row"></div>
              <div class="van-skeleton__row"></div>
            </div>
          </div>
        </div> <!--course-list  van-skeleton-->

        <div class="course-list" v-if="!isLoading" :key="timer">
          <chao-xing-cell
              v-for="(item,index) in channelList"
              :image="item.content.course.data[0].imageurl"
              :className="item.content.course.data[0].name"
              :courseName="item.content.name"
              :teacherName="item.content.course.data[0].teacherfactor"
              :op="ops[index]"
              @goSetting="goSetting(item)"
              @openClick="switchClick(item,index,true)"
              @closeClick="switchClick(item,index,false)"
              :showPopover="false">
          </chao-xing-cell>
        </div> <!--course-list-->

      </div> <!--content-->
    </van-pull-refresh>


  </div>
</template>

<script>
import {getCoursex, getCourse, putCourse} from "@/api/app/chaoxing";
import ChaoXingCell from "@/components/ChaoXingCell";
import AlNavBar from "@/components/AlNavBar";
import AlCell from "@/components/AlCell";
import {mapState} from 'vuex'
import {Toast} from 'vant';

export default {
  name: "CourseSetting",
  components: {ChaoXingCell, AlNavBar, AlCell},
  data() {
    return {
      channelList: [],
      chaoXingInfo: {},
      courseList: [],
      icons: [],
      ops: [],
      isLoading: true,
      isRefresh: false,
      timer: ''
    }
  },
  created() {
    this.mountedData();
  },
  methods: {
    back() {
      this.$router.push({
        name: 'chaoXingApp'
      })
    },
    switchClick(item, index, kx) {
      let i = this.ops[index];
      if (kx) {
        i = 2;
      } else {
        i = 1;
      }
      let courseInfo = {
        userId: this.userInfo.id,
        classId: item.key,
        courseId: item.content.course.data[0].id,
        open: kx
      }
      putCourse(this.userInfo.id, courseInfo).then(res => {
        if (res.success) {
          if (kx) {
            Toast({
              message: '开启成功❤~',
              className: 'iconfont icon-ok',
            });
          } else {
            Toast({
              message: '关闭成功',
              className: 'iconfont icon-ok',
            });
          }
          this.$set(this.ops, index, i);
        } else {
          Toast({
            message: '操作失败',
            className: 'iconfont icon-warning',
          });
        }
      })
    },
    goSetting(item) {
      this.$router.push({
        name: 'chaoXingAppSetting',
        params: {
          item: item,
        }
      })
    },
    mountedData() {
      getCoursex(this.userInfo.id).then(res => {
        if (res.success) {
          this.courseList = res.data;
        }
      })
      getCourse(this.userInfo.id).then(res => {
        this.channelList = res.channelList.filter(item => item.content.roletype === 3);

        this.channelList.forEach((item, index) => {
          this.ops[index] = 0;
          for (let i = 0; i < this.courseList.length; i++) {
            let value = this.courseList[i];
            if (value.courseId === item.content.course.data[0].id) {
              this.$set(this.ops, index, this.ops[index] + 1)
              if (value.open) {
                this.$set(this.ops, index, this.ops[index] + 1)
              }
              break;
            }
          }/*courseList.for*/

        })/*channelList.forEach*/

        /* 用于第一次加载和刷新 */
        this.isLoading = false;
        this.$nextTick(() => {
          this.timer = new Date().getTime();
        })
      })

    },
    onRefresh() {
      setTimeout(() => {
        this.isRefresh = false;
        this.mountedData();
        Toast({
          message: '刷新成功',
          className: 'iconfont icon-ok'
        });
      }, 500);

    },
  },
  computed: {
    ...mapState(['userInfo']),
  }
}
</script>

<style lang="less">

.content {

  padding: 0 5px 0 5px;
  margin-top: 10px;

  .van-skeleton--animate {

    .van-skeleton__avatar {
      //float: left;
      margin: 5px 10px 10px 10px;
      border-radius: 10px;
      width: 3.83rem;
      height: 2.4rem;
    }
  }

  .van-popover {
    overflow: hidden;
  }

  .van-cell {
    margin: 5px 0 0 0;
    border-radius: 20px;
  }

  .cell-list {
    //border-radius: 10px;
    overflow: hidden;
  }
}

</style>